<template>
	<view class="goods-panel">
		<view class="goods-list" v-for="(item,idx) in goodsList" :key="item.id"
			@click="jump('/pages/category/goodsDetail?id='+item.id)">
			<image class="goods-img" :src="item.picture" mode="aspectFill" @error="$handleImageError(item,'picture')"></image>
			<view class="goods-info">
				<view class="goods-name">{{pageCountChars(item.name,15)}}</view>
				<view class="goods-tips"></view>
				<view class="goods-bottom">
					<text class="goods-price">¥{{getPrice(item)}}</text>
					<text class="shop-car iconfont selected-car">&#xe63f;</text>
				</view>
			</view>

		</view>
	</view>

</template>

<script setup lang="ts">
	import { toYuan,countChars } from '../common/util';

	const props = defineProps({
		goodsList: Array as () => any[],
	})
	const jump = (url) => {
		uni.navigateTo({
			url
		})
	}
	const pageCountChars=(text,len)=>{
		return countChars(text,len)
	}
	const getFirstImg = (str) => {
		const arr = JSON.parse(str)
		return arr[0].url
	}
	const getPrice = (item) => {
		if(item.specification){
			const arr = JSON.parse(item.specification)
			let max = 0
			let min = 0
			arr.forEach((item) => {
				if (item.price > max) max = item.price
				if (item.price < min || min === 0) min = item.price
			})
			if(min===max) return toYuan(min)
			return toYuan(min) + '-' + toYuan(max)
		}else{
			return toYuan(item.price) ||'--'
		}
		
	}
</script>

<style lang="scss">
	.goods-panel {
		.goods-list {
			display: inline-block;
			width: 49%;
			margin-right: 2%;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 0 4px 1px rgba(100, 100, 100, 0.1);
			padding: 20rpx;
		}

		.goods-img {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}

		.goods-list:nth-child(2n) {
			margin-right: 0;
		}

		.goods-name {
			font-size: 28rpx;
			color: #333;
			margin: 10rpx 0;
			height: 80rpx;
		}

		.goods-bottom {
			display: flex;
			align-items: center;

		}

		.goods-price {
			font-size: 38rpx;
			font-weight: bold;
			color: #FF315A;
			flex-grow: 1;
		}

		.shop-car {
			font-size: 38rpx;
			padding: 0 10rpx;
			color: #666;
		}

		.selected-car {
			color: #FF315A;
		}
	}
</style>